<script setup>
import {ref} from "vue";

let isOpen = ref(false)    // 控制是否显示模态框
let isTeleport = ref(false)  // 控制是否禁用位置穿越

</script>

<template>
  <button v-on:click="isOpen  = !isOpen">{{ isOpen ? '打开' : '关闭' }}</button>
  <button v-on:click="isTeleport  = !isTeleport">{{ isTeleport ? '启用' : '禁用' }}</button>

  <hr>

  <!--to 属性用于指定将代码穿越到哪个位置-->
  <!--将里面的内容放到 指定 元素的所有子元素的后面，也就是在内部追加-->
  <teleport to="body" v-bind:disabled="isTeleport">
    <div v-if="isOpen">我是谁？我在哪？我来自哪？</div>
    <button v-on:click="isOpen = !isOpen" v-if="isOpen">关闭</button>
  </teleport>
</template>

<style scoped>

</style>